<template>
  <a-layout class="layout-demo">
    <a-layout-header style="height: 60px; box-sizing: border-box; padding: 0">
      <a-page-header
        :style="{ background: '#fff' }"
        subtitle="骑行社区后台管理系统"
        :show-back="false"
      >
        <template #title>
          <img
            style="height: 26px; width: 100%"
            src="../assets/images/logo.png"
            alt=""
          />
        </template>
        <template #extra>
          <a-button @click="outLigin">退出</a-button>
        </template>
      </a-page-header>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width>
        <a-menu
          :style="{ width: '200px', height: 'calc(100vh - 64px)' }"
          :default-open-keys="['用户管理']"
          :default-selected-keys="['user']"
          show-collapse-button
          breakpoint="xl"
          @menu-item-click="onMenuItemClick"
        >
          <template v-for="item in menuData" :key="item.name">
            <div>
              <a-sub-menu :key="item.name">
                <template #icon>
                  <component :is="item.icon" />
                </template>
                <template #title>{{ item.name }}</template>
                <template v-for="chil in item.children" :key="chil.key">
                  <div>
                    <a-menu-item :key="chil.key">{{ chil.name }}</a-menu-item>
                  </div>
                </template>
              </a-sub-menu>
            </div>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 14px">
        <!-- <a-breadcrumb :style="{ padding: '16px 0' }">
          <a-breadcrumb-item>用户管理</a-breadcrumb-item>
          <a-breadcrumb-item>粉丝管理</a-breadcrumb-item>
        </a-breadcrumb> -->
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup>
import {
  IconUser,
  IconComputer,
  IconBookmark,
  IconFire,
} from "@arco-design/web-vue/es/icon";
import { useRouter } from "vue-router";
const router = useRouter();
console.log(1);
const menuData = [
  {
    name: "用户管理",
    icon: IconUser,
    children: [
      {
        name: "用户管理",
        key: "user",
      },
      {
        name: "粉丝管理",
        key: "fans",
      },
      {
        name: "关注管理",
        key: "following",
      },
      {
        name: "好友管理",
        key: "friend",
      },
      {
        name: "聊天记录",
        key: "chat",
      },
    ],
  },
  {
    name: "社区管理",
    icon: IconComputer,
    children: [
      {
        name: "动态管理",
        key: "dynamic",
      },
      {
        name: "话题圈",
        key: "topic",
      },
      {
        name: "评论管理",
        key: "comment",
      },
      {
        name: "举报管理",
        key: "report",
      },
    ],
  },
  {
    name: "活动管理",
    icon: IconBookmark,
    children: [
      {
        name: "活动管理",
        key: "activity",
      },
      {
        name: "约骑管理",
        key: "riding",
      },
    ],
  },
  {
    name: "装备管理",
    icon: IconFire,
    children: [
      {
        name: "轮播图管理",
        key: "banner",
      },
      {
        name: "商品管理",
        key: "store",
      },
      {
        name: "订单管理",
        key: "order",
      },
      {
        name: "流水记录",
        key: "walletlog",
      },
    ],
  },
];

function onMenuItemClick(key) {
  console.log(key);
  router.push({ name: key });
}

function outLigin(){
  console.log('退出登录')
  localStorage.removeItem('token')
  router.push({ name: 'login' })
}
</script>

<style lang="less" scoped>
.layout-demo {
  /* height: 500px; */
  height: 100vh;
  box-sizing: border-box;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-page-header) {
  padding: 0;
  height: 90%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: red;
  align-items: center;
  .arco-page-header-wrapper {
    width: 100%;
  }
}
</style>
